
<template>
    <div>
        <textarea ref="tinymce" :id='id' :value="values"></textarea>
    </div>
</template>

<script>
    /* eslint-disable */
    import plugins from './plugins'
    import toolbar from './toolbar'

    export default {
        name: 'aTinymce',
        data(){
            return{
                fullscreen:false,
                TinymceID:this.id
            }
        },
        props:{
            id:{
                type:String,
                default:()=>{
                    return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
                }
            },
            values:{
                type:String,
            }
        },
        methods:{
            initTinymce(){
                const _this = this;
                window.tinymce.init({
                    selector:`#${this.TinymceID}`,
                    language:'zh_CN',
                    height:300,
                    body_class: 'panel-body ',
                    object_resizing: false,
                    end_container_on_empty_block: true,
                    end_container_on_empty_block: true,
                    powerpaste_word_import: 'clean',
                    advlist_bullet_styles: 'square',
                    advlist_number_styles: 'default',
                    default_link_target: '_blank',
                    plugins:plugins,
                    toolbar:toolbar,
                    init_instance_callback: editor => {
                        editor.on('NodeChange Change KeyUp SetContent ',()=>{
                            this.$emit('input',editor)
                        })
                    },
                    setup(editor) {
                        editor.on('FullscreenStateChanged', (e) => {
                            _this.fullscreen = e.state
                        })
                    }
                })
            },
            destroyTinymce() {
                const tinymce = window.tinymce.get(this.TinymceId);
                if (this.fullscreen) {
                    tinymce.execCommand('mceFullScreen')
                }

                if (tinymce) {
                    tinymce.destroy()
                }
            },
        },
        updated() {
            window.tinymce.get(this.TinymceID).setContent(this.values)
        },
        mounted() {
            this.initTinymce()
        },
        activated() {
            this.initTinymce()
        },
        beforeDestroy: function () {
            this.destroyTinymce()
        }
    }
    /* eslint-disable */
</script>

<style>

</style>
